<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Dashboard Category</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/vendor/css/fontastic.css">
    <link rel="stylesheet" href="/static/vendor/css/style.default.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/vendor/css/custom.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link rel="shortcut icon" href="/static/vendor/img/favicon.ico">
    <script src="/static/vendor/js/render.js"></script>
</head>
<body>
<nav class="side-navbar">
    <div class="side-navbar-wrapper">
        <!-- Sidebar Header    -->
        <div class="sidenav-header d-flex align-items-center justify-content-center">
            <!-- User Info-->
            <div class="sidenav-header-inner text-center"><img
                        src="https://file.yaop.ink/d4810653bff615a839283c91039f4589.png" alt="person"
                        class="img-fluid rounded-circle">
                <h2 class="h5">TungYao</h2><span>Web Architect</span>
            </div>
            <!-- Small Brand information, appears on minimized sidebar-->
            <div class="sidenav-header-logo"><a href="index.html" class="brand-small text-center">
                    <strong>B</strong><strong class="text-primary">D</strong></a></div>
        </div>
        <!-- Sidebar Navigation Menus-->
        <div class="main-menu">
            <h5 class="sidenav-heading">Main</h5>
            <ul id="side-main-menu" class="side-menu list-unstyled">
                <li><a href="/manager/page/index"> <i class="icon-home"></i>Home </a></li>
                <li><a href="/manager/page/article"> <i class="icon-form"></i>Article </a></li>
                <li><a href="/manager/page/category"> <i class="fa fa-book"></i>category </a></li>
                <li><a href="/manager/page/write"> <i class="fa fa-book"></i>Write </a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="page">
    <header class="header">
        <nav class="navbar">
            <div class="container-fluid">
                <div class="navbar-holder d-flex align-items-center justify-content-between">
                    <div class="navbar-header"><a id="toggle-btn" href="#" class="menu-btn"><i
                                    class="icon-bars"> </i></a><a href="index.html" class="navbar-brand">
                            <div class="brand-text d-none d-md-inline-block"><span>Bootstrap </span><strong
                                        class="text-primary">Dashboard</strong></div>
                        </a></div>
                    <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                        <li class="nav-item"><a href="/manager/user/out" class="nav-link logout"> <span
                                        class="d-none d-sm-inline-block">Logout</span><i
                                        class="fa fa-sign-out"></i></a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                <li class="breadcrumb-item active">Category</li>
            </ul>
        </div>
    </div>
    <section>
        <div class="container-fluid">
            <!-- Page Header-->
            <header>
                <h1 class="h3 display">Tables <button class="btn btn-warning" data-toggle="modal"
                                                      data-target="#exampleModal">Add a column</button></h1>
            </header>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Category Table</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>name</th>
                                        <th>color</th>
                                    </tr>
                                    </thead>
                                    <tbody id="article_table">
                                    <tr>
                                        <td>{{item.id}}</td>
                                        <td>{{item.name}}</td>
                                        <td>{{item.color}}</td>
                                        <td>
                                            <button type="button" class="btn btn-primary" data-toggle="modal"
                                                    data-whatever="{{JSON.stringify(item)}}"
                                                    data-target="#exampleModal">edit
                                            </button>
                                            <button class="btn btn-danger" onclick="deleteit({{item.id}})">delete
                                            </button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="padding: 30px">
            <form id="form">
                <div class="modal-id form-group" style="display: none">
                    <label>ID</label>
                    <input type="number" class="form-control" name="id" aria-describedby="sizing-addon2">
                </div>
                <div class="modal-name form-group">
                    <label>NAME</label>
                    <input type="text" class="form-control" name="name" aria-describedby="sizing-addon2">
                </div>
                <div class="modal-color form-group">
                    <label>COLOR</label>
                    <input type="text" class="form-control" name="color" aria-describedby="sizing-addon2">
                </div>
                <div class="modal-submit form-group">
                    <input type="button" value="submit" class="btn btn-primary" onclick="submitCategory()">
                    <input type="button" value="cancel" class="btn btn-warning" data-dismiss="modal">
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    let article_table = new Render("#article_table");

    function init() {
        $.ajax({
            url: "/manager/get/category",
            type: "GET",
            success: function (e) {
                article_table.for(e);
            }
        });
    }

    function deleteit(id) {
        if(confirm("确定删除")){
            $.ajax({
                url:`/manager/delete/category?id=${id}`,
                type: "DELETE",
                success: function (e) {
                    if(e){
                        location.reload()
                    }
                }
            })
        }
    }

    init();
    $('#exampleModal').on('show.bs.modal', function (event) {
        let button = $(event.relatedTarget);
        let recipient = button.data('whatever');
        let modal = $(this);
        if (recipient){
            modal.find('.modal-id input').val(recipient.id)
            modal.find('.modal-name input').val(recipient.name)
            modal.find('.modal-color input').val(recipient.color)
        }else{
            modal.find('.modal-id input').val("-1")
        }

    })

    function submitCategory() {
        let data = $("#form").serializeArray();
        let sendData = {};
        sendData.id = data[0].value;
        sendData.name = data[1].value;
        sendData.color = data[2].value;
        $.ajax({
            url: "/manager/post_category",
            data: JSON.stringify(sendData),
            type: "POST",
            dataType: "json",
            success: function (e) {
                if (e) {
                    location.reload();
                }
            }
        });
    }
</script>
</body>
</html>